﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/Content/Css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="~/Content/Css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="~/Content/Css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="~/Content/Css/animate.css" rel="stylesheet">
    <link href="~/Content/Css/style.css?v=4.1.0" rel="stylesheet">
    <link href="~/Content/Css/plugins/multiselect/bootstrap-multiselect.css" rel="stylesheet" />
    <style>
        .ibox {
            margin-bottom: 0px;
        }

        .ibox-content {
            padding: 15px 20px 0px 20px;
        }

        .multiselect-container input[type="checkbox"] {
            margin-top: 7px;
        }

        .RoleIDLaber {
            padding-top: 8px;
            padding-left: 0px;
            padding-right: 0px;
        }

        .padding {
            padding-left: 0px;
            padding-right: 0px;
            text-align: right;
        }
    </style>
</head>
<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight" style="padding:10px;">
        <div class="ibox float-e-margins"> 

            <input type="hidden" id="StaffID" name="StaffID" value="@ViewBag.StaffID" />
            <input type="hidden" id="Currencys" name="Currencys" value="@ViewBag.Currencys" />
            <input type="hidden" id="BeginTime" name="BeginTime" value="@ViewBag.BeginTime" />
            <input type="hidden" id="EndTime" name="EndTime" value="@ViewBag.EndTime" />

            <div class="ibox-content" style="padding:15px;">
                <div class="btn-group hidden-xs" id="exampleToolbar" role="group"> 
                    <button id="refreshBtn" type="button" class="btn btn-outline btn-default">
                        <i class="glyphicon glyphicon-refresh" aria-hidden="true"></i>
                    </button>

                </div>
                <table id="table" data-mobile-responsive="true"></table>
            </div>
        </div>
        @* 用来传递消息的隐藏域 *@
    </div>



    <!-- 全局js -->
    <script type="text/javascript" src="~/Scripts/jquery.min.js?v=2.1.4"></script>
    <script type="text/javascript" src="~/Scripts/bootstrap.min.js?v=3.3.6"></script>
    <!-- 自定义js -->
    <script type="text/javascript" src="~/Scripts/content.js?v=1.0.0"></script>
    <!-- Bootstrap table -->
    <script type="text/javascript" src="~/Scripts/plugins/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="~/Scripts/plugins/bootstrap-table/extensions/export/bootstrap-table-export.js"></script>
    <script src="~/Scripts/plugins/bootstrap-table/extensions/export/tableExport.jquery.plugin-master/tableExport.js"></script>
    <script type="text/javascript" src="~/Scripts/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
    <!-- layerDate plugin javascript -->
    <script type="text/javascript" src="~/Scripts/plugins/layer/laydate/laydate.js"></script>
    <script src="~/Scripts/plugins/multiselect/bootstrap-multiselect.js"></script>

    <script type="text/javascript">
        $(function () {
            initTable();
        });

        var $table = $('#table');
        function initTable() {
            $table.bootstrapTable({
                url: '/BackStaff/HourIndexAsync',            //数据来源地址
                method: 'post',                     //数据请求方式
                striped: true,                      //是否显示行间隔色
                cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true,                   //是否启用分页
                sidePagination: 'server',           //在服务器端分页
                queryParams: queryParams,           //传递参数
                pageNumber: 1,                      //初始化加载第一页，默认第一页
                pageSize: 20,                       //每页的记录行数（*）
                pageList: [10, 20, 30, 40, 50],     //可供选择的每页的行数（*）
                clickToSelect: true,                //是否启用点击选中行
                //toolbar: "#tableToolBar",
                height: getHeight(),
                search: true,
                showRefresh: true,
                showColumns: true,
                showExport: true,                     //是否显示导出
                exportDataType: "basic",              //basic', 'all', 'selected'.
                exportTypes: ['excel'],
                exportOptions: { fileName: '123' },
                toolbar: '#exampleToolbar',
                iconSize: 'outline',
                icons: {
                    refresh: 'glyphicon-repeat',
                    columns: 'glyphicon-list'
                },
                toolbar: '#exampleToolbar',
                columns: [{
                    width: 38,
                    field: 'aaaaaaa',
                    checkbox: true,
                }, {
                    title: '行号',
                    align: 'center',
                    width: 50,
                    formatter: function (value, row, index) { return index + 1; }
                }, {
                    field: 'CalculatingDay',
                    title: '算力时间',
                    align: 'center'
                }, {
                    field: 'Currencys',
                    title: '币种',
                    align: 'center'
                }
                //, {
                //    field: 'StaffName',
                //    title: '客户经理',
                //    align: 'center'
                //}
                , {
                    field: 'Calculating',
                    title: '算力',
                    align: 'center',
                }, {
                    field: 'Number',
                    title: '数量',
                    align: 'center',
                }
                ]
            });
        }

        //查询的参数
        var queryParams = function (params) {
            var temp = {
                staffID: $('#StaffID').val(),
                currencys: $('#Currencys').val(),
                beginTime: $('#BeginTime').val(),
                endTime: $('#EndTime').val(),
            };
            console.log(temp);
            console.log(params);
            return temp;
        };

        //获取表格高度
        function getHeight() {
            return $(window).height() - 180;
        }

        //刷新表格数据
        var refreshTable = function () {
            $table.bootstrapTable("refresh");
        }

        //刷新按钮
        $("#refreshBtn").click(function (e) {
            $table.bootstrapTable("refresh");
        });

        //搜索按钮
        $("#searchBtn").click(function (e) {
            $table.bootstrapTable("refresh");
        });
    </script>
</body>
</html>
